<template>
	<view class="container">
		<view class="box-fixed" id="boxFixed">
			<view :style="{ height: height + 'px' }">
				<view style="font-size: 36rpx; padding-left: 50rpx" :style="{
            lineHeight: height - menuHeight + 'px',
            paddingTop: menuHeight + 'px',
          }">毛发社区</view>
			</view>
			<view class="head-subsection">
				<view class="head-subsection-item" v-for="(item, index) in tablist" @click="onetypeClick(index)"
					:key="index" :class="currentOneType === index ? 'head-subsection-item-active' : ''">
					<view>{{ item.name }}</view>
					<view class="line_b"></view>
				</view>

				<!-- <u-tabs :list="tablist" @click="onetypeClick"></u-tabs> -->
				<!-- <view class="item-subsection" :class="currentOneType === 1 ? 'active' : ''" @click="onetypeClick(1)">关注</view> -->
				<!-- 	<view class="item-subsection" :class="currentOneType === 0 ? 'active' : ''" @click="onetypeClick(0)">我的关注
				</view>
				<view class="item-subsection" :class="currentOneType === 1 ? 'active' : ''" @click="onetypeClick(1)">热门话题
				</view>
				<view class="item-subsection" :class="currentOneType === 2 ? 'active' : ''" @click="onetypeClick(2)">发友答疑
				</view>
				<view class="item-subsection" :class="currentOneType === 3 ? 'active' : ''" @click="onetypeClick(3)">发友科普
				</view> -->
				<!-- <view class="item-subsection">抖音直播</view> -->
			</view>
		</view>
		<view :style="{ 'margin-top': marginTop + 10 + 'px' }" v-if="forceRefresh">
			<MyAttention :surplusHeight='surplusHeight' v-if="currentOneType === 0" :openId="openId"
				:tabList="list[0]" />
			<HotTopic :surplusHeight='surplusHeight' v-if="currentOneType === 1" :openId="openId" :tabList="list[1]" />
			<AnswerQuestions :surplusHeight='surplusHeight' v-if="currentOneType === 2" :openId="openId"
				:tabList="list[2]" />
			<PopularizationOfScience :surplusHeight='surplusHeight' v-if="currentOneType === 3" :openId="openId"
				:tabList="list[3]" />
		</view>
	</view>
</template>

<script>
	import MyAttention from "./MyAttention/index.vue";
	import PopularizationOfScience from "./PopularizationOfScience/index.vue";
	import HotTopic from "./HotTopic/index.vue";
	import AnswerQuestions from "./AnswerQuestions/index.vue";
	export default {
		props: {
			height: {
				type: Number,
				require: true,
			},
			menuHeight: {
				type: Number,
			},
		},
		data() {
			return {
				tablist: [{
						name: "关注",
					},
					{
						name: "热门话题",
					},
					{
						name: "发友答疑",
					},
					{
						name: "发友科普",
					},
				],
				list: [
					[{
						name: "我的关注",
					}, ],
					[{
						name: "热门话题",
					}, ],
					[{
							name: "脱发答疑",
						},
						{
							name: "植发答疑",
						},
						{
							name: "术后答疑",
						},
					],
					[{
							name: "脱发科普",
						},
						{
							name: "植发科普",
						},
						{
							name: "术后科普",
						},
					],
				],
				currentOneType: 0,
				openId: "",
				forceRefresh: true,
				marginTop: 0,
				surplusHeight: 0,
			};
		},
		methods: {
			onetypeClick(index) {
				this.currentOneType = index;
				console.log(this.currentOneType);
			},
			tabClick(e) {},
			hairCommunityClick() {
				uni.navigateTo({
					url: "/pages/HairCommunityDetail/index",
				});
			},
		},
		components: {
			MyAttention,
			PopularizationOfScience,
			HotTopic,
			AnswerQuestions,
		},
		updated() {
			this.forceRefresh = true;
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query
				.select("#boxFixed")
				.boundingClientRect((data) => {
					this.marginTop = data.height;
					let tabbarHeight = uni.getStorageSync("tabbarHeight");
					this.surplusHeight = tabbarHeight + data.height + 12;

				})
				.exec();

			uni.$on("articleUpdate", (data) => {
				this.forceRefresh = false;
				// this.nextTick() {
				//   this.forceRefresh = true;
				// })
			});
			let openId = uni.getStorageSync("openId");
			this.openId = openId;
		},
	};
</script>

<style lang="scss">
	@import "./index.scss";
</style>